<template>
  <el-row>
     <el-form label-width="170px" :model="le" size="small" :rules="rules" ref="form">
       <el-form-item label="通道状态：">
        <span class="fz12" :class="enter_status === -200 || enter_status === -100 || enter_status === 313 || enter_status === 913 ? 'err' : 'tip'">{{ enter_status === -200 ? '审核未通过' : enter_status === -100 ? '入驻失败' : enter_status ===  0 ? '资料提审' : enter_status === 101 ? '已初审，待入驻' : enter_status === 100 ? '入驻中' : enter_status === 200 ? '已入驻' : enter_status === 311 ? '等待配置支付通道' : enter_status === 312 ? '部分支付通道配置成功' : enter_status === 313 ? '支付通道配置失败' : enter_status === 310 ? '支付通道配置成功' : enter_status === 500 ? '完成' : enter_status === 900 ? '申请修改信息' : enter_status === 901 ? '信息修改中' : enter_status === 910 ? '申请修改费率' : enter_status === 911 ? '费率修改中' : enter_status === 912 ? '费率修改完成' : enter_status === 913 ? '费率修改失败' : '无' }}</span>
      </el-form-item>
      <el-form-item label="错误信息：" v-if="enter_status === -200 || enter_status === -100 || enter_status === 313 || enter_status === 913">
        <span class="fz12 err">{{ error_info }}</span>
      </el-form-item>
      <el-form-item label="门店名称：" prop="mch_short_name">
         <el-input class="w240" :disabled="disabled === -200 ? false : true" v-model="le.mch_short_name" placeholder="参考格式：深圳市贵人鸟鞋服店"></el-input>
       </el-form-item>
       <el-form-item label="经营地址：" prop="area">
         <el-cascader :disabled="disabled === -200 ? false : true" :options="address" class="w240" clearable  v-model="le.area" :props="props"></el-cascader>
       </el-form-item>
       <el-form-item label="详细地址：" prop="address">
         <el-input :disabled="disabled === -200 ? false : true" class="w240" v-model="le.address" placeholder="精确到门牌号"></el-input>
       </el-form-item>
      <el-form-item label="行业类型：" prop="mcc">
        <el-select class="w200" :disabled="disabled === -200 ? false : true" placeholder="" v-model="le.mcc" @change="handleSelectHealthPermit">
          <el-option v-for="item in options"
            :key="item.F_mcc_code"
            :label="item.F_grandpa_txt + '/' + item.F_father_txt + '/' + item.F_mcc_txt"
            :value="item.F_mcc_code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="渠道选择：">
        <el-button :disabled="disabled === -200 ? false : true" :type="le.balance_type === 'd1' ? 'warning' : ''" size="mini" @click="le.balance_type = 'd1'">D+1</el-button>
        <el-button :disabled="disabled === -200 ? false : true" :type="le.balance_type === 'd0' ? 'warning' : ''" size="mini" @click="le.balance_type = 'd0'">D+0</el-button>
      </el-form-item>
      <el-form-item label="配置POS机支付：">
        <el-switch :disabled="disabled === -200 || card_type !== 3 ? false : true" v-model="le.card" active-color="#13ce66" @change="handleChangeSwith"></el-switch>
      </el-form-item>
      <el-col :span="24" style="border:1px solid #333;" v-if="le.card">
        <h4 style="padding-left:15px;">POS机支付</h4>
        <el-form-item label="借记卡费率D+1：" prop="credit_d1">
          <el-input class="w200" v-model.number="le.credit_d1" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-form-item label="借记D+1封顶金额：" prop="debit_money">
          <el-input class="w200" v-model.number="le.debit_money" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>元
        </el-form-item>
        <el-form-item label="借记卡费率D+0：" prop="credit_d0">
          <el-input class="w200" v-model.number="le.credit_d0" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-form-item label="贷记卡费率D+1：" prop="debit_d1">
          <el-input class="w200" v-model.number="le.debit_d1" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-form-item label="贷记卡费率D+0：" prop="debit_d0">
          <el-input class="w200" v-model.number="le.debit_d0" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-form-item label="境外卡D+1：" prop="ovsea_d1">
          <el-input class="w200" v-model.number="le.ovsea_d1" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-form-item label="境外卡D+0：" prop="ovsea_d0">
          <el-input class="w200" v-model.number="le.ovsea_d0" :maxlength="4" :disabled="disabled === -200 || card_type !== 3 ? false : true"></el-input>%
        </el-form-item>
        <el-row>
          <label class="el-form-item__label" style="width: 170px;">证件信息：</label>
          <el-form-item style="display:inline-block" label-width="0" class="mr10">
            <el-upload :disabled="disabled === -200 || card_type !== 3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleStoreFace" :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="le.channel_lepos_agreement" :src="le.channel_lepos_agreement" alt="">
              <img v-else src="https://mat.uphicoo.com/43935624-916a-11e8-b463-10bf48e1a920.jpg" alt="">
              <span class="fz12">租赁协议或房产证明</span>
            </el-upload>
          </el-form-item>
          <el-form-item style="display:inline-block" label-width="0" class="mr10" prop="channel_lepos_network_access_protocol">
            <el-upload :disabled="disabled === -200 || card_type !== 3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handlechannelLeposNetworkAccessProtocol" :show-file-list="false">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="le.channel_lepos_network_access_protocol" :src="le.channel_lepos_network_access_protocol" alt="">
              <img v-else src="https://mat.uphicoo.com/6190770c-939e-11e8-b81d-10bf48e1a920.jpg" alt="">
              <span class="fz12"><span class="err">*</span>入网协议</span>
            </el-upload>
          </el-form-item>
          <el-form-item style="display:inline-block" label-width="0" class="mr10" prop="store_licence_hyg" v-if="HealthPermit" >
            <el-upload :disabled="disabled === -200 || card_type !== 3 ? false : true" class="uploader" :action="url" :before-upload="beforeUpload" :on-success="handleStoreLicence" :show-file-list="false"> 
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="le.store_licence_hyg" :src="le.store_licence_hyg" alt="">
              <img v-else src="https://mat.uphicoo.com/9fc21b56-93c2-11e8-a966-10bf48e1a920.jpg" alt="">
              <span class="fz12"><span class="err">*</span>食品卫生许可证</span>
            </el-upload>
          </el-form-item>

          <el-form-item style="display:inline-block" label-width="0" class="mr10">
            <el-upload :disabled="disabled === -200 || card_type !== 3 ? false : true" class="uploader" :action="url" :show-file-list="false" :before-upload="beforeUpload" :on-success="handleUploadSuccBankCerti">
              <i class="el-icon-plus avatar-uploader-icon"></i>
              <img v-if="le.ch_lpos_certi" :src="le.ch_lpos_certi" alt="">
              <img v-else src="https://mat.uphicoo.com/c3ceaf1e-916a-11e8-a3b8-10bf48e1a920.jpg" alt="">
              <span class="fz12">授权书</span>
            </el-upload>
          </el-form-item>
        </el-row>
        
      </el-col>
      <el-col :span="24" style="border:1px solid #333;" class="mt20">
        <h3 style="padding-left:15px;">移动支付</h3>
        <el-form-item label="微信通道签约费率D+0：" prop="wx_t0">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="le.wx_t0" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="微信通道签约费率D+1：" prop="wx_t1">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="le.wx_t1" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="支付宝通道签约费率D+0：" prop="ali_t0">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="le.ali_t0" :maxlength="4"></el-input>%
        </el-form-item>
        <el-form-item label="支付宝通道签约费率D+1：" prop="ali_t1">
          <el-input :disabled="disabled === -200 ? false : true" class="w200" v-model.number="le.ali_t1" :maxlength="4"></el-input>%
        </el-form-item>
      </el-col>
      <el-col :span="24" class="mt20">
        <el-form-item v-if="disabled === -200 || card_type !== 3">
          <el-button type="primary" size="small" @click="handleClickOnSubmit" :loading="btnSubmit">提交审核</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </el-row>
</template>

<script>
import { merchantChannelLeQuery, merchantChannelLeUpdate, merchantChannelLeCategory, merchantChannelLeHealthPermit, maerchantChannelLeAddress } from '@/api/shop'

export default {
  data() {
    return {
      HealthPermit: false,
      btnSubmit: false,
      disabled: 100,
      options: [],
      address: [],
      card_type: null,
      enter_status: null,
      error_info: '',
      le: {
        area: [],
        card: false,
        mch_short_name: '',
        balance_type: 'd1',
        address: '',
        debit_money: '',
        debit_d1: '',
        debit_d0: '',
        credit_d1: '',
        credit_d0: '',
        ovsea_d1: '',
        ovsea_d0: '',
        channel_lepos_agreement: '',
        channel_lepos_network_access_protocol: '',
        store_licence_hyg: '',
        ch_lpos_certi: '',
        wx_t0: '',
        wx_t1: '',
        ali_t0: '',
        ali_t1: '',
        mcc: ''
      },
      rules: {
        area: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        mcc: [{ required: true, trigger: 'change', message: '必须选择哦~' }],
        address: [{ required: true, trigger: 'blur', message: '必须填写哦~' }],
        debit_d1: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        debit_d0: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        debit_money: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        credit_d1: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        credit_d0: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        ovsea_d0: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        ovsea_d1: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        wx_t1: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        wx_t0: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        ali_t1: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        ali_t0: [{ required: true, trigger: 'blur', type: 'number', message: '请认真填写哦~' }],
        mch_short_name: [{ required: true, trigger: 'blur', message: '请认真填写哦~' }],
        channel_lepos_agreement: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        ch_lpos_certi: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        channel_lepos_network_access_protocol: [{ required: true, trigger: 'change', message: '必须上传哦~' }],
        store_licence_hyg: [{ required: true, trigger: 'change', message: '必须上传哦~' }]
      },
      props: {
        value: 'code',
        label: 'alias',
        children: 'city'
      },
      url: process.env.BASE_API + '/merchant/uploadCommer'
    }
  },
  methods: {
    handleDocumentInit() {
      merchantChannelLeCategory().then(res => {
        if (res.data.errorCode === 0) {
          this.options = res.data.result
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
      maerchantChannelLeAddress().then(res => {
        this.address = res.data.result
      })
      merchantChannelLeQuery(this.$route.query.merchant_num).then(res => {
        if (res.data.errorCode === 0) {
          this.disabled = res.data.result.channel_status
          res.data.result.card === 1 ? this.le.card = false : res.data.result.card === 3 ? this.le.card = true : ''
          this.card_type = res.data.result.card
          this.le.area = res.data.result.area.code
          this.le.mch_short_name = res.data.result.mch_short_name
          this.le.address = res.data.result.address
          this.le.mcc = res.data.result.mcc.code
          this.le.balance_type = res.data.result.balance_type.toLowerCase()
          this.le.credit_d1 = Number(res.data.result.pos_rates.credit.d1.rate)
          this.le.credit_d0 = Number(res.data.result.pos_rates.credit.d0.rate)
          this.le.debit_d1 = Number(res.data.result.pos_rates.debit.d1.rate)
          this.le.debit_d0 = Number(res.data.result.pos_rates.debit.d0.rate)
          this.le.ovsea_d0 = Number(res.data.result.pos_rates.ovsea.d0.rate)
          this.le.ovsea_d1 = Number(res.data.result.pos_rates.ovsea.d1.rate)
          this.le.wx_t0 = Number(res.data.result.rates_t0.wx)
          this.le.wx_t1 = Number(res.data.result.rates_t1.wx)
          this.le.ali_t0 = Number(res.data.result.rates_t0.ali)
          this.le.ali_t1 = Number(res.data.result.rates_t1.ali)
          this.le.debit_money = Number(res.data.result.pos_rates.debit.d1.ceiling)
          this.le.channel_lepos_agreement = res.data.result.photo.channel_lepos_place_evid
          this.le.channel_lepos_network_access_protocol = res.data.result.photo.channel_lepos_netprot
          this.le.store_licence_hyg = res.data.result.photo.store_licence_hyg
          res.data.result.photo.store_licence_hyg ? this.HealthPermit = true : this.HealthPermit = false
          this.le.ch_lpos_certi = res.data.result.photo.ch_lpos_certi
          this.enter_status = res.data.result.enter_status.code
          this.error_info = res.data.result.enter_status.error_info
        } else {
          this.disabled = -200 // 该条件-200并非拒绝状态 此处为表单编辑状态 因为只有-200 拒绝的时候表单才可以被编辑提交
        }
      })
    },
    handleClickOnSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.btnSubmit = true
          merchantChannelLeUpdate(this.$route.query.merchant_num, this.le).then(res => {
            if (res.data.errorCode === 0) {
              this.$message.success(res.data.errorMsg)
              this.disabled = 100
              this.btnSubmit = false
            } else {
              this.$message.error(res.data.errorMsg)
              this.btnSubmit = false
            }
          })
        }
      })
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB！!')
      }
      return isJPG && isLt2M
    },
    handleStoreFace(file) {
      this.le.channel_lepos_agreement = file.result
    },
    handlechannelLeposNetworkAccessProtocol(file) {
      this.le.channel_lepos_network_access_protocol = file.result
    },
    handleStoreLicence(file) {
      this.le.store_licence_hyg = file.result
    },
    handleUploadSuccBankCerti(file) {
      this.le.ch_lpos_certi = file.result
    },
    handleSelectHealthPermit(v) {
      merchantChannelLeHealthPermit(v).then(res => {
        if (res.data.errorCode === 0) {
          this.HealthPermit = true
        } else {
          this.HealthPermit = false
          this.store_licence_hyg = ''
        }
      })
    },
    handleChangeSwith(v) {
      this.le.credit = null
      this.le.debit_money = null
      this.le.debit = null
      this.le.channel_lepos_agreement = null
      this.le.channel_lepos_network_access_protocol = null
      this.le.store_licence_hyg = null
      this.le.ch_lpos_certi = null
    }
  },
  created() {
    this.handleDocumentInit()
  }
}
</script>